<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>点单管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/milkyTeaType' }"
        >奶茶分类</el-breadcrumb-item
      >
      <el-breadcrumb-item>分类详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="6" :offset="17">
          <el-input
            placeholder="搜索奶茶"
            v-model="query"
            clearable
            @clear="getMilkyTeaList"
            type="primary"
          >
            <el-button
              class="button"
              slot="append"
              icon="el-icon-search"
              @click="getMilkyTeaListByName(1)"
            ></el-button
          ></el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="milkyTeaList" border stripe>
        <el-table-column label="名称" prop="name" min-width="10%"></el-table-column>
        <el-table-column label="图片" prop="image" min-width="10%">
          <template slot-scope="scope">
            <img
              :src="$global.imgURL + scope.row.image"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column label="分类" prop="typeName" min-width="10%"></el-table-column>
        <el-table-column label="价格" prop="price" min-width="10%">
          <template slot-scope="scope">
            {{ scope.row.price / 100 }}元
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" min-width="10%">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.state === 1 ? 'success' : 'danger'"
              disable-transitions
              >{{ scope.row.state == 1 ? "启用" : "禁用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="10%">
          <template slot-scope="scope">
            <!-- 详情 -->
            <el-button
              type="primary"
              size="mini"
              @click="toMoreMilkyTea(scope.row.id)"
            >详情</el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeMilkyTeaById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        milkyTeaTypeId: 0,
        // 当前的页数
        pageNo: 1,
        // 当前每页显示多少条数据
        pageSize: 2,
        
      },
      //模糊查询
      query: "",
      milkyTeaList: [],
      total: 0,
    };
  },
  created() {
    this.queryInfo.milkyTeaTypeId = this.$route.params.id;
    //获取奶茶分类列表
    this.getMilkyTeaList();
  },
  methods: {
    //获取奶茶分类列表(调用后台接口)
    async getMilkyTeaList() {
      const { data: res } = await this.$http.get(
        "milkyTeaType/listMilkyTeaByType",
        {
          params: this.queryInfo,
        }
      );
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取奶茶分类列表失败！");
      }
      this.milkyTeaList = res.data.milkyTeas;
      this.total = res.data.count;
    },
    //获取模糊查询奶茶分类
    async getMilkyTeaListByName(pageNo) {
      this.queryInfo.pageNo = pageNo;
      const { data: res } = await this.$http.get(
        "milkyTeaType/listMilkyTeaByTypeLikeMilkyTeaName?keyWord=" + this.query,
        {
          params: this.queryInfo,
        }
      );
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取奶茶列表失败！");
      }
      this.milkyTeaList = res.data.milkyTeas;
      this.total = res.data.count;
      // console.log(" ========================" + this.milkyTeaList);
      // console.log(res);
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize;
      if (this.query === "") {
        this.getMilkyTeaList();
      } else {
        this.getMilkyTeaListByName(this.queryInfo.pageNo);
      }
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pageNo = newPage;
      if (this.query === "") {
        this.getMilkyTeaList();
      } else {
        this.getMilkyTeaListByName(this.queryInfo.pageNo);
      }
    },
    //详情奶茶
    async toMoreMilkyTea(id) {
      console.log(id);
      this.$router.push("/milkyTea/moreMilkyTea/" + id+"/2/"+this.queryInfo.milkyTeaTypeId);
    },
    // 根据Id删除对应的用户信息
    async removeMilkyTeaById(id) {
      console.log(id);
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将奶茶从该分类删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      let params = new FormData();
      params.append("teaId", id);

      //调用删除接口
      const { data: res } = await this.$http.post(
        "milkyTeaType/deleteMilkyTeaTypeGetNull",
        params
      );

      if (res.code !== 200) {
        this.$message.error(res.massage);
        this.queryInfo.pageNo = 1;
        this.query = "";
        this.getMilkyTeaList();
        return;
      }

      this.$message.success("删除成功！");
      this.queryInfo.pageNo = 1;
      this.query = "";
      this.getMilkyTeaList();
    },
  },
};
</script>

<style lang="less" scoped>
.button:hover {
  background-color: rgb(64, 158, 255);
  color: rgb(255, 255, 255);
}
</style>
